<template>
  <div class="recommend">
    <swiper
      :options="swiperOption"
      ref="mySwiper"
      class="swiper"
      v-if="bannerList.length"
    >
      <swiper-slide v-for="(item, index) in bannerList" :key="index"
      class="slide"
        ><img
          :src="item.imageUrl"
          width="100%"
          height="100%"
          @click="pathHandler(item,urltags)"
      />
      <div class="tags" v-show="item.typeTitle">{{item.typeTitle}}</div>
      </swiper-slide>
      <div class="swiper-pagination" slot="pagination"></div>
    </swiper>
  </div>
</template>

<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
import "swiper/dist/css/swiper.css";
import { getBanner } from "@/api/api";
export default {
  name: "recommend",
  components: {
    swiper,
    swiperSlide,
  },
  data() {
    return {
      bannerList: [],
      urltags:null,
      swiperOption: {
        loop: true,
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: false,
        },
        // 显示分页
        pagination: {
          el: ".swiper-pagination",
          clickable: true, //允许分页点击跳转
        },
      },
    };
  },
  computed: {},
  mounted() {
    this.getBannerList();
  },
  methods: {
    getBannerList(params) {
      getBanner(params).then((res) => {
        this.bannerList = res.data.banners;
        this.bannerList.forEach(e=>{
          if(e.typeTitle == "活动" || e.typeTitle == "专题" || e.typeTitle == "独家策划"){
            this.urltags = 1
            this.url = e.url
          }
        })
      });
    },
    pathHandler(item,urltags) {
      const tags = item.typeTitle
      console.log(item);
      if(tags == "新歌首发"){
        this.$router.push({ path: "/song", query: { id: item.encodeId } });
      }else if(tags == "新碟首发"){
        this.$router.push({path:"/albumdetails",query: { id: item.encodeId }})
      }else if(tags == "热歌推荐"){
        this.$router.push({ path: "/song", query: { id: item.encodeId } });
      }
      if(urltags == 1 && (tags == "活动" || tags == "专题" || tags == "独家策划")){
        window.open(this.url)
      }
    },
  },
};
</script>

<style  scoped lang="less">
.recommend {
  margin-top: 20px;
}
.swiper {
  height: 440px;
  border-radius: 5px;
 .slide{
    position: relative;
 }
  cursor: pointer;
  .tags{
    width: 80px;
    height: 30px;
    background-color: #f74b47;
    position: absolute;
    bottom: 0;
    right: 0;
    border-top-left-radius: 15px;
    text-align: center;
    line-height: 30px;
    font-family: "hmR";
    color: #fff;
    font-size: 14px;
  }
}
</style>